<template>
  <div :class="{ card: true, 'card-center': isCenter }" :style="getStyle">
    <div v-if="!title || !isSlotName" class="card-title" :style="`font-size:${titleSize}px`" @click="titleClick">
      <slot name="title"></slot>
      <span v-if="!isSlotName">{{ title }}</span>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "Card",
  props: {
    title: {
      type: String,
      default: "",
      require: true,
    },
    height: {
      type: Number,
    },
    // 垂直水平居中
    isCenter: {
      type: Boolean,
      default: false,
    },
    titleSize: {
      type: Number,
      default: 14,
    },
  },
  computed: {
    isSlotName() {
      return Object.keys(this.$slots?.title || {}).length > 0;
    },
    getStyle() {
      return `height:${this.height}px`;
    },
  },
  methods: {
    titleClick() {
      this.$emit("title-click");
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  padding: 15px;
  background: #fff;
  border-radius: 3px;
  .card-title {
    position: relative;
    padding-left: 12px;
    color: #606266;
    font-size: 14px;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      background: #409eff;
      width: 5px;
      bottom: 0;
    }
    &:hover {
      color: #409eff;
      cursor: pointer;
    }
  }
  .card-body {
    padding-top: 15px;
    font-size: 13px;
  }
  &.card-center {
    display: flex;
    flex-direction: column;
    .card-body {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
